<template>
	<layout :footer-visible="tabIdx == 0 && taskDetail && (taskDetail.received || ((!taskDetail.remainCount || taskDetail.remainCount) > 0 && (!taskDetail.deadline || taskDetail.deadline >= Date.now())))" footer-bg-color="#FFF2EF">
		<view class="nice-nav-2">
			<u-navbar title="领取任务" titleColor="#fff" backIconColor="#fff"></u-navbar>
			<view class="wrapper">
				<watermark-view :text="`ID: ${userInfo.id}`">
					<view class="header">
						<view v-for="item,idx in tabs" class="tab-item" :class="{'active': tabIdx == idx}">{{item.name}}</view>
					</view>
					<view v-if="(!taskDetail.received && (!taskDetail.deadline || taskDetail.deadline >= Date.now()) && (!taskDetail.remainCount || taskDetail.remainCount > 0)) || taskDetail.received" class="content">
						<view class="h-box mg-b-sm">
							<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_tripe.png" width="40rpx" height="40rpx"></u-image>
							<text class="label">任务名称</text>
							
							<text class="value">{{taskDetail.title || ''}}</text>
						</view>
						<!-- <view v-if="taskDetail.assets" class="mg-b-sm">
							<view class="h-box">
								<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_camera.png" width="40rpx" height="40rpx"></u-image>
								<text class="label">任务素材</text>
								<view class="value" @click="saveAssets">
									<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_xiazai_anniu@2x.png" width="40rpx" height="40rpx"></u-image>
								</view>
							</view>
							<view class="mg-t-xs" style="margin-left: 50rpx;">
								<uni-file-picker v-model="taskDetail.assets" readonly></uni-file-picker>
							</view>
						</view> -->
						<view class="mg-b-sm">
							<view class="h-box">
								<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_note.png" width="40rpx" height="40rpx"></u-image>
								<text class="label">任务描述</text>
							</view>
							<view class="detail mg-t-xs">
								<jyf-parser :html="taskDetail.detail || ''"></jyf-parser>
								<!-- <text class="value" style="margin-left: 0;">{{taskDetail.detail || ''}}</text> -->
							</view>
						</view>
						<view class="mg-b-sm">
							<view class="h-box">
								<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_location.png" width="40rpx" height="40rpx"></u-image>
								<text class="label">店铺信息</text>
								<text class="value">{{taskDetail.storeInfo.name || ''}}</text>
							</view>
							<view class="wrapper-address h-box">
								<view class="flex-extend u-line-1">{{taskDetail.storeInfo.address}}</view>
								<view v-if="taskDetail.storeInfo.distance" class="h-box">
									<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_arrow_purple.png" width="26rpx" height="28rpx"></u-image>
									<text>{{formatDistance(taskDetail.storeInfo.distance)}}</text>
								</view>
							</view>
						</view>
						<view class="h-box mg-b-sm">
							<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_clock.png" width="40rpx" height="40rpx"></u-image>
							<text class="label">任务截止时间</text>
							<view class="value">
								<uni-dateformat :threshold="[0, 0]" :date="taskDetail.deadline || ''"></uni-dateformat>
							</view>
						</view>
						<view class="h-box mg-b-sm">
							<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_rewards.png" width="40rpx" height="40rpx"></u-image>
							<text class="label">任务奖励</text>
							
							<view class="value h-box">
								<view v-if="taskDetail.rewards" class="h-box">
									<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_coin@2x.png" width="38rpx" height="38rpx"></u-image>
									<text>+{{taskDetail.rewards}}</text>
								</view>
								<view v-if="taskDetail.rewards2" class="h-box mg-l-xs">
									<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_packet.png" width="26rpx" height="32rpx"></u-image>
									<text>+{{taskDetail.rewards2 / 100}}</text>
								</view>
							</view>
						</view>
					</view>
					<view v-else-if="taskDetail.deadline && taskDetail.deadline < Date.now()" class="v-box pad-t-base pad-l-base pad-r-base">
						<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/img_expired.png" width="226rpx" height="234rpx"></u-image>
					</view>
					<view v-else-if="taskDetail.remainCount == 0" class="v-box pad-t-base pad-l-base pad-r-base">
						<u-image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/img_over.png" width="226rpx" height="234rpx"></u-image>
					</view>
				</watermark-view>
			</view>
		</view>
		<view v-if="taskDetail.title" slot="footer" class="h-box justify-center pad-base">
			<view v-if="taskDetail.received" class="btn-commit" @click="navToTaskDetail">去完成任务</view>
			<view v-else-if="taskDetail.checkGetLocation&&taskDetail.storeInfo.distance>50" class="btn-commit-forbid">距离商家超过50米</view>
			<view v-else-if="taskDetail.remainCount != 0" class="btn-commit" @click="handleReceive">领取</view>
		</view>
	</layout>
	<!-- <layout footer-visible>
		<u-navbar title="领取任务" :background="navBg" titleColor="#fff" backIconColor="#fff"></u-navbar>
		<view class="pad-base">
			<view>任务标题：{{taskDetail.title || ''}}</view>
		</view>
		<view slot="footer" class="h-box v-fill justify-center pad-t-sm pad-b-sm">
			<view>
				<nice-red-button @click="navToTaskDetail" v-if="taskDetail.received" text="去完成任务"></nice-red-button>
				<nice-red-button @click="handleReceive" v-else-if="taskDetail.remainCount != 0" text="领取"></nice-red-button>
				<view v-else>已领完</view>
			</view>
		</view>
	</layout> -->
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	const marketingTask = uniCloud.importObject('marketingTask', {
		customUI: true
	})
	const authUtil = uniCloud.importObject('authUtil', {
		customUI: true
	})
	import util from "../common/util.js"
	export default {
		data() {
			return {
				navBg: {
					'background-image': 'linear-gradient(to right, #434AD8, #8E77F5)'
				},
				taskDetail: {
					_id: '',
					received: true,
					storeInfo: {}
				},
				tabIdx: 0,
				tabs: [{
					name: '任务详情'
				}]
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		watch: {
			hasLogin(newVal) {
				this.needReload = true
			}
		},
		onLoad(e) {
			if (e.q) {
				let paramArr = decodeURIComponent(e.q).split('receive-task?')[1].split('&')
				for (let item of paramArr) {
					let cache = item.split('=')
					if (cache[0] == 'taskId') {
						this.taskDetail._id = cache[1]
						this.loadData()
						return
					}
				}
			} else {
				this.taskDetail._id = e.taskId
				this.loadData()
				return
			}
			uni.reLaunch({
				url: "/pages/platform/goods-list"
			})
		},
		onShow() {
			if (this.needReload) {
				this.needReload = false
				this.loadData()
			}
		},
		methods: {
			...mapActions(['getCurrRegion']),
			formatDistance: util.formatDistance,
			navToTaskDetail() {
				uni.redirectTo({
					url: '/pagesMarketing/task-detail?taskId=' + this.taskDetail.detailId
				})
			},
			async loadData() {
				try {
					uni.showLoading({
						mask: true
					})
					let data = await this.getCurrRegion()
					let task = await marketingTask.getTaskDetail(this.taskDetail._id,data.userLocation)
					console.log("task",task)
					if (task.checkUserID !== false) {
						let authInfo = await authUtil.getMyAuthInfo()
						if (!authInfo || authInfo.auth_status != 2) {
							uni.hideLoading()
							uni.showModal({
								title: '您还未实名认证！',
								success: (res) => {
									if (res.confirm) {
										uni.redirectTo({
											url: '/pagesAuth/auth'
										})
									} else {
										uni.switchTab({
											url: '/pages/user/user'
										})
									}
								}
							})
							return
						}
					}
					this.taskDetail = task
					uni.hideLoading()
				} catch(e){
					console.error(e)
					uni.hideLoading()
					if (/未登录/.test(e)) {
						uni.navigateTo({
							url: '/pagesFoo/public/login'
						})
					} else {
						this.$showError(e.errMsg || e.message || e)
					}
				}
			},
			async handleReceive() {
				try {
					uni.showLoading({
						mask:true
					})
					let userTask = await marketingTask.receiveTask(this.taskDetail._id)
					this.taskDetail.received = true
					this.taskDetail.detailId = userTask._id
					uni.hideLoading()
					this.$toast('已领取')
				} catch(e){
					console.error(e)
					uni.hideLoading()
					this.$showError(e.errMsg || e.message || e)
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #FFF2EF;
	}
</style>
<style lang="scss" scoped>
	.wrapper {
		background-image: url(https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/bg_task_detail@2x.png);
		background-size: 100% 100%;
		width: calc(100% - 40rpx);
		height: 1400rpx;
		margin: 30rpx auto 0 auto;
		
		.header {
			height: 88rpx;
			border-bottom: 1rpx dashed #E3BCBC;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 30rpx;
			padding-top: 10rpx;
			
			.tab-item {
				height: 52rpx;
				border-radius: 28rpx;
				border: 2rpx solid #999999;
				line-height: 52rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				font-weight: 500;
			}
			.tab-item.active {
				border-color: #FF7D66;
				color: #E54428;
			}
			.tab-item:not(:last-child) {
				margin-right: 30rpx;
			}
		}
		.content {
			padding: 30rpx 50rpx 30rpx 50rpx;
			overflow-y: auto;
			max-height: 1260rpx;
		}
		
		.label {
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 42rpx;
			margin-left: 10rpx;
		}
		
		.value {
			font-size: 28rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #666666;
			line-height: 40rpx;
			margin-left: 20rpx;
			flex: 1;
			text-align: right;
		}
		
		.detail {
			margin-left: 50rpx;
			padding: 20rpx;
			min-height: 200rpx;
			background: #ababab33;
			border-radius: 12rpx;
			overflow-y: auto;
		}
		
		.wrapper-address {
			margin-left: 50rpx;
			background-color: #a191ff40;
			padding: 0 20rpx;
			margin-top: 10rpx;
			height: 54rpx;
			line-height: 54rpx;
			border-radius: 12rpx;
		}
	}
		
	.tips {
		font-size: 28rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #FE7446;
		line-height: 48px;
	}
	.btn-commit {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-image: linear-gradient(to right, #FD5C47, #FF9F43);
		width: 100%;
		color: #fff;
		font-size: 32rpx;
		border-radius: 40rpx;
	}
	.btn-commit-forbid {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: rgb(238, 238, 238);
		width: 100%;
		color: #fff;
		font-size: 32rpx;
		border-radius: 40rpx;
	}
	.timeline-msg {
		background: #F5F5F5;
		border-radius: 12rpx;
		padding: 20rpx;
		min-height: 200rpx;
		margin-top: 20rpx;
	}
	.timeline-title {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 40rpx;
	}
	.timeline-time {
		font-size: 28rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #999999;
		line-height: 40rpx;
	}
	
	::v-deep .file-picker__box-content {
		background-color: #F3F1FF;
		border: 0 !important;
		.icon-add {
			background-color: #C4C1FF;
		}
	}
	::v-deep uni-textarea {
		height: 160rpx !important;
	}
	.status-tag {
		height: 44rpx;
		line-height: 44rpx;
		border-radius: 22rpx;
		color: #fff;
		font-size: 24rpx;
		padding: 0 20rpx;
	}
	.status-pass {
		background: #FF7D66;
	}
	.status-reject {
		background: #FF7D66;
	}
	.status-pending {
		background: rgba(255,159,67,0.22);
		border: 2rpx solid #FF9F43;
		color: #FF9F43;
	}
	.status-expired {
		color: #A4A4A4;
	}
	.status-init {
		background: rgba(255, 125, 102, 0.30);
		border: 2rpx solid #FF7D66;
		color: #E54428;
	}
</style>
